<!-- 开通承接页 -->
<template>
	<!-- 功能介绍 -->
	<view class="introduce">
		<view class="banner">
			<view class="strong">
				<text>让您的技能发挥价值</text>
			</view>
			<view class="small">
				<text>发服务、找客户、接悬赏</text>
				<text>成为知识服务商，让平台为您带来更多收益</text>
			</view>
		</view>
		<!-- <video class="video" src="https://img.book118.com/sr1/M00/06/3D/wKh2AmI4HduAS7bOAa-IMqE8k78048.mp4" controls></video> -->
		<view class="desc">
			<view class="hd">
				<text>产品介绍</text>
			</view>
			<view class="bd">
				<text>通过文档挖掘客户、管理客户、助力服务交易的系统（知识服务如：文档服务、专业写作、咨询服务等）。集打造品牌、客户沉淀、提升收益等功效于一体，提供服务发布功能、悬赏发布与接单、双向沟通渠道（主动发起交流、坐等客户咨询）、自动化工具、数据分析呈现等。结合平台全方位匹配曝光，助力服务价值最大化！</text>
			</view>
		</view>
	</view>
	<!-- 产品功效 -->
	<view class="effect">
		<view class="hd">
			<text>产品功效</text>
		</view>
		<view class="bd">
			<view class="item" v-for="(item,index) in data.effect" :key="index">
				<view class="image">
					<lazy-load-image class="img" :image="item.img" imgMode='aspectFill' :errorImg="config.errorImage.img" height="360rpx" />
				</view>
				<view class="h2">
					<text>{{item.title}}</text>
				</view>
				<view class="h3">
					<text>{{item.desc}}</text>
				</view>
				<view class="ul">
					<text v-for="(item2,index2) in item.list" :key="index2">• {{item2}}</text>
				</view>
				<navigator class="nav" :url="`/subpages/web/web?url=${encodeURIComponent(item.path)}`" :hover-stop-propagation="true"><text>{{item.nav}}</text></navigator>
			</view>
		</view>
	</view>
	<!-- 优势 -->
	<view class="advantage">
		<view class="bg-image">
			<lazy-load-image class="img" image="https://img.book118.com/sr1/M00/0C/04/wKh2C2NCoWmIboGDAACTRs-0ayQAA6QmgCL3wsAAJNe102.jpg" imgMode='aspectFill' height="794rpx" />
		</view>
		<view class="hd">
			<text>平台优势</text>
		</view>
		<view class="bd">
			<view class="item" v-for="(item,index) in data.advantage" :key="index">
				<icon :class="['iconfont icon','icon-'+item.icon]"></icon>
				<text class="title">{{item.title}}</text>
				<text class="desc">{{item.desc}}</text>
			</view>
		</view>
	</view>
	<!-- 功能概况 -->
	<view class="overview">
		<view class="hd">
			<text>功能概况</text>
		</view>
		<view class="bd">
			<!-- tabs -->
			<view class="tab">
				<v-tabs v-model="data.overview.tabIndex" :tabs="data.overview.tabList" color="#999" fontSize="32rpx" height="100rpx" :lineScale="0.3" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true"></v-tabs>
			</view>
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :current="data.overview.tabIndex" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in data.overview.list" :key="index">
					<view class="image" @click="previewImage(index,data.overview.list)">
						<lazy-load-image class="img" :image="item.img" :errorImg="config.errorImage.img" imgMode='aspectFill' height="394rpx" />
					</view>
					<view class="desc">
						<text>{{item.desc}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<!-- 官方答疑 -->
	<view class="question">
		<view class="hd">
			<text>官方答疑</text>
		</view>
		<view class="bd">
			<uni-collapse>
				<template v-for="(item,index) in data.question" :key="index">
					<uni-collapse-item class="uni-collapse-item" :title="item.title">
						<view class="desc">
							<text>{{item.desc}}</text>
						</view>
					</uni-collapse-item>
				</template>
			</uni-collapse>
		</view>
	</view>
	<!-- 底部 -->
	<view class="foot">
		<view class="tip">
			<text>商户交流QQ群： </text>
			<text class="color" @click="copy(config.customer.qq_group)">{{config.customer.qq_group}}</text>
		</view>
	</view>
	<!-- 操作 -->
	<view class="btns">
		<button type="default" class="btn btn-im" hover-class="btnClickStyle" @click="qq()">
			<icon class="iconfont icon">&#xe7b4;</icon>
			<text>咨询客服</text>
		</button>
		<button type="default" class="btn btn-open" hover-class="btnClickStyle" @click="navToCheckLogin('/subpages/user-merchant/open/open')">
			<text>免费开通</text>
		</button>
	</view>
	<!-- 登录组件 -->
	<weixin-login ref="wxLogin" />
</template>
<script setup>
	import { ref, reactive } from 'vue';
	import useStatus from '@/common/hooks/useStatus.js';
	import config from '@/uni.config.js';
	import { showQQ, showCopy } from '@/common/hooks/useShow.js';
	uni.$on('GOAUTH', () => {
		setTimeout(() => {
			goAuth();
		}, 200)
	});
	const wxLogin = ref(null);
	const { navToCheckLogin, goAuth } = useStatus(wxLogin);
	const data = reactive({
		effect: [{
			img: 'https://img.book118.com/sr1/M00/0C/04/wKh2C2NCoZaIU1e1AAELtczugR8AA6QmgD-SqcAAQvN121.jpg',
			title: '打造品牌',
			desc: '帮助各大服务商打造属于自己的品牌',
			list: ['认证 V 标识 ，增强品牌权威性，建立可信度', '空间曝光品牌，客户直接触达您的品牌介绍'],
			nav: '',
			path: ''
		}, {
			img: 'https://img.book118.com/sr1/M00/0C/04/wKh2C2NCobKIL3TKAACsPms5rDsAA6QmgFIdVUAAKxW584.jpg ',
			title: '推广服务',
			desc: '面向海量客户，曝光展示您的服务',
			list: ['给您的服务配置标识，平台自动匹配文档与服务', '文档详情页、搜索结果页、分类页等多展位曝光'],
			nav: '查看推广展位',
			path: config.article.booth
		}, {
			img: 'https://img.book118.com/sr1/M00/0C/04/wKh2C2NCoc-IHNn4AADCYPT7yE0AA6QmgGbVmEAAMJ4791.jpg',
			title: '挖掘客户',
			desc: '在平台精准匹配的客户中持续挖掘',
			list: ['挖掘更多意向客户，电脑和手机均可操作', '高效运营管理 ，可自定义打招呼语、设置自动打招呼'],
			nav: '',
			path: ''
		}, {
			img: 'https://img.book118.com/sr1/M00/0C/04/wKh2C2NCoeiIIio0AAD7aIAX-wUAA6QmgHs3AkAAPuA434.jpg',
			title: '提升收益',
			desc: '从沟通到成交，轻松实现服务变现',
			list: ['参与悬赏接单、发布服务接单、主动寻找客户', '快速触达客户沟通，文档订单挽回客户'],
			nav: '提升收益技巧',
			path: config.article.skill
		}],
		advantage: [{
			icon: 'one',
			title: '用户规模大',
			desc: '百万级日访问量，支撑服务商的获客需求'
		}, {
			icon: 'two',
			title: '行业覆盖广',
			desc: '21个一级分类与505个二级分类覆盖多行业'
		}, {
			icon: 'three',
			title: '地域覆盖多',
			desc: '来自全国34个省级行政区的地域客户访问'
		}, {
			icon: 'four',
			title: '场地不限制',
			desc: '支持移动端，轻松沟通不受时间地点限制'
		}],
		overview: {
			tabIndex: 0,
			tabList: ['服务曝光', '客户挖掘', '高效拓客', '沟通转化', '管理客户'],
			list: [{
				desc: '将您的基本信息或您创建的服务匹配并展示在文档详情页、搜索结果页、分类页、空间页、聊天页等高流量页面，让客户主动联系您。',
				img: 'https://img.book118.com/sr1/M00/04/39/wKh2C2KxLX-IB4uSAAFjqH6O3HsAA3dZgHIQIMAAWPA102.png'
			}, {
				desc: '在“客户大厅”或“我的客户”列表选择合适的客户，主动给客户打招呼，打通与客户的联系道路。同时支持移动端操作，随时随地发现商机！',
				img: 'https://img.book118.com/sr1/M00/04/39/wKh2C2KxLdqINeLlAADZTn6tC2oAA3dZwFlWi0AANlm808.png'
			}, {
				desc: '您还可以自主设置获客便捷功能，使用平台配备的提效工具及功能，配合消息推送与微信小程序操作等，让您获客更轻松！',
				img: 'https://img.book118.com/sr1/M00/04/39/wKh2C2KxLg2IaetYAAC8ImSHTYEAA3daAAeXZ4AALw6846.png	'
			}, {
				desc: '平台自建的信息沟通工具，通过后台数据反馈及追踪、“用户到商户、商户到用户”的信息系统，将潜在用户转化为高价值、高转换率用户！',
				img: 'https://img.book118.com/sr1/M00/04/39/wKh2C2KxLj-IekWuAADcqqpo8h0AA3daADXpQoAANzC325.png'
			}, {
				desc: '在“我的客户”列表进行客户管理，后台还配备了数据分析工具，让商户通过具体数据，精确分析筛选出自己的潜在价值用户，打通用户到商户的“服务最后一公里”！',
				img: 'https://img.book118.com/sr1/M00/04/39/wKh2C2KxLliIJn4CAADNxXaYqCEAA3daAE-UKwAAM3d746.png'
			}]
		},
		question: [{
			title: '开通收费吗？',
			desc: '目前全程免费，但不保证永久免费。建议尽早开通使用，先人一步享受免费政策。'
		}, {
			title: '如何变现？',
			desc: '我们目前有发布服务（在网站重要展位上曝光您及您发布的服务）、接悬赏订单（给客户提供发布悬赏的功能并展示）、寻找客户（主动联系可能有服务需求的客户）的渠道。最终达成共识进行变现。'
		}, {
			title: '没有文档可以获得客户吗？',
			desc: '①您自己上传的文档可以获得不限量的可联系客户；②通过平台关键词匹配可以获得每日限量的可联系客户；③完善服务信息、发布服务信息，可以获得曝光，让客户主动联系您。④接客户主动发布的悬赏订单'
		}, {
			title: '我可以提供哪些服务？',
			desc: '根据您自己的专业技能、或企业的营业服务范围提供服务，知识类服务、线下其他服务均可。'
		}, {
			title: '如何获取更多、更精确的客户？',
			desc: '①上传更多与您提供服务相关的文档；②准确完善服务信息，匹配更精准；③发布服务信息，精准客户主动找上门。④接客户主动发布的悬赏订单'
		}, {
			title: '信息安全吗？',
			desc: '有的人担心由于一些网络安全问题导致本项目被迫停止，辛苦经营后心血被浪费。我们想说的是，产品开发本项目时均经过法务团队的专业分析，全程完全符合《网络信息安全法》等有关法律法规，通过各种措施防护从而可持续发展，请放心使用！'
		}]
	})
	// swiper切换
	function swiperChange(e) {
		data.overview.tabIndex = e.detail.current;
	}
	// 预览图片
	function previewImage(index, list) {
		uni.previewImage({
			current: index,
			urls: list.map(item => item.img)
		})
	}
	// 客服QQ
	function qq() {
		showQQ({
			value: config.customer.qq_operate,
			title: '提示',
			msg: '客服QQ号'
		})
	}
	// 复制QQ号
	function copy(value) {
		showCopy({
			data: value,
			type: 1,
			icon: 'none',
			title: `QQ群号已复制`
		})
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 110rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 110rpx);
		background-color: $bgColor;
	}
	.uni-collapse {
		background-color: transparent !important;
	}
	.uni-collapse-item {
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
	}
	.uni-collapse-item__title-text {
		font-size: 36rpx !important;
		color: #000 !important;
	}
	.uni-collapse-item-border,
	.uni-collapse-item__title.is-open,
	.uni-collapse-item__wrap-content.uni-collapse-item--border {
		border-bottom-color: $bgColor !important;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	@mixin common {
		padding: 40rpx 0;
		text-align: center;
		font-weight: 700;
		font-size: 48rpx;
		color: #000;
	}
	.introduce {
		background-color: #fff;
		.banner {
			width: 100%;
			height: 210rpx;
			background-color: $color;
			.strong {
				padding: 10rpx 0 20rpx;
				text-align: center;
				font-weight: 700;
				font-size: 48rpx;
				color: #fff;
			}
			.small {
				@include flex(column, center);
				line-height: 42rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
		.video {
			display: block;
			width: 694rpx;
			margin: -196rpx auto 0;
			height: 390rpx;
			border-radius: 8rpx;
		}
		.desc {
			padding: 20rpx 28rpx 40rpx;
			.hd {
				position: relative;
				padding: 30rpx 20rpx;
				font-size: 34rpx;
				color: #000;
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					width: 8rpx;
					height: 32rpx;
					transform: translateY(-50%);
					background-color: $color;
				}
			}
			.bd {
				line-height: 54rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.effect {
		.hd {
			@include common;
		}
		.bd {
			padding: 0 28rpx;
		}
		.item {
			margin-bottom: 40rpx;
			border: 1px solid #ddd;
			border-radius: 18rpx;
			overflow: hidden;
			background-color: #fff;
			.image {
				font-size: 0;
			}
			.img {
				width: 694rpx;
				height: 360rpx;
			}
			.h2, .h3, .ul {
				padding: 0 28rpx;
			}
			.h2 {
				height: 140rpx;
				line-height: 140rpx;
				font-size: 44rpx;
				color: #000;
			}
			.h3 {
				font-size: 30rpx;
				color: #333;
			}
			.ul {
				margin: 36rpx 0;
				line-height: 46rpx;
				font-size: 24rpx;
				color: #707F9E;
				text {
					display: block;
				}
			}
			.nav {
				margin-bottom: 48rpx;
				text-align: center;
				font-size: 28rpx;
				color: #aaa;
				text {
					text-decoration: underline;
				}
			}
		}
	}
	.advantage {
		position: relative;
		width: 100%;
		height: 794rpx;
		.bg-image {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
		}
		.hd {
			@include common;
			color: #fff;
		}
		.bd {
			@include flex;
			margin: -40rpx 0;
			.item {
				@include flex(column, center);
				width: 50%;
				padding: 40rpx 0;
				color: #fff;
				.icon {
					font-size: 70rpx;
				}
				.title {
					padding: 24rpx 0 40rpx;
					font-size: 32rpx;
				}
				.desc {
					display: block;
					width: 224rpx;
					line-height: 36rpx;
					text-align: center;
					font-size: 22rpx;
				}
			}
		}
		.icon-one:before {
			content: '\e81c';
		}
		.icon-two:before {
			content: '\e81e';
		}
		.icon-three:before {
			content: '\e81f';
		}
		.icon-four:before {
			content: '\e81d';
		}
	}
	.overview {
		padding: 10rpx 0 48rpx;
		background-color: #fff;
		.hd {
			@include common;
		}
		.swiper {
			width: 694rpx;
			height: 648rpx;
			margin: 26rpx auto;
			padding: 54rpx 28rpx 40rpx;
			box-sizing: border-box;
			border-radius: 18rpx;
			border: 1px solid $color;
			overflow: hidden;
			.image {
				font-size: 0;
				.img {
					width: 636rpx;
					height: 394rpx;
				}
			}
			.desc {
				margin-top: 30rpx;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #707F9E;
			}
		}
	}
	.question {
		.hd {
			@include common;
		}
		.bd {
			padding: 0 28rpx;
			.uni-collapse-item {
				margin-bottom: 20rpx;
				.desc {
					padding: 28rpx;
					line-height: 44rpx;
					font-size: 26rpx;
					color: #707F9E;
				}
			}
		}
	}
	.foot {
		padding: 30rpx 0 38rpx;
		.tip {
			text-align: center;
			font-size: 24rpx;
			color: #888;
			.color {
				color: $color;
			}
		}
	}
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 20220930;
		padding: 10rpx 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		@include flex(row, flex-start);
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .08);
		background-color: #fff;
		.btn {
			background-color: transparent;
			margin: 0;
			padding: 0;
			height: 100%;
			&-im {
				@include flex(column, center);
				width: 156rpx;
				.icon {
					height: 40rpx;
					margin-bottom: 10rpx;
					font-size: 40rpx;
				}
				text {
					line-height: 22rpx;
					font-size: 22rpx;
					color: #666;
				}
			}
			&-open {
				width: 564rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: $color;
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
</style>
